<template>
  <el-drawer
    v-model="drawerVisible"
    :title="'桌台：' + selectedDesk.displayText"
    size="50%"
    direction="rtl"
    :before-close="handleClose"
  >
    <div class="flex flex-col">
      <div class="text-center font-bold text-22px mb-2">产品明细</div>
      <table class="w-full">
        <thead>
          <tr class="font-bold h-50px" align="center">
            <th>图片</th>
            <th>名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(product, index) in selectedDesk.products" :key="index" align="center">
            <td>
              <div class="w-40px h-40px">
                <img
                  :src="product.image"
                  class="w-full h-full border border-solid border-gray-50"
                />
              </div>
            </td>
            <td>{{ product.name }}</td>
            <td>{{ product.price }}</td>
            <td>{{ product.quantity }}</td>
            <td>
              <span class="text-red-500">{{ product.status }}</span>
            </td>
          </tr>
        </tbody>
      </table>

      <!-- 收货信息 -->
      <el-descriptions title="收货信息" :column="2" border>
        <el-descriptions-item label="用户昵称">羡民</el-descriptions-item>
        <el-descriptions-item label="收货人">山野羡民</el-descriptions-item>
        <el-descriptions-item label="联系电话">15285116029</el-descriptions-item>
        <el-descriptions-item label="收货地址" :span="2"
          >贵州省贵阳市南明区铁建城xxx</el-descriptions-item
        >
      </el-descriptions>

      <!-- 订单信息 -->
      <el-descriptions title="订单信息" :column="2" border class="mt-20px">
        <el-descriptions-item label="门店">{{
          selectedDesk.storeName || '测试店铺'
        }}</el-descriptions-item>
        <el-descriptions-item label="取餐号">{{
          selectedDesk.takeoutNumber || '5224'
        }}</el-descriptions-item>
        <el-descriptions-item label="类型">
          <el-tag type="danger" effect="light">堂食</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="就餐人数">{{
          selectedDesk.diners || '2'
        }}</el-descriptions-item>
        <el-descriptions-item label="订单号">{{
          selectedDesk.orderNumber || '1872536954571063296'
        }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">{{
          selectedDesk.orderStatus || '未支付'
        }}</el-descriptions-item>
        <el-descriptions-item label="产品总数">{{
          selectedDesk.totalProducts || '7'
        }}</el-descriptions-item>
        <el-descriptions-item label="产品总价">{{
          selectedDesk.totalPrice || '4.25'
        }}</el-descriptions-item>
        <el-descriptions-item label="支付邮费">{{
          selectedDesk.shippingFee || '20'
        }}</el-descriptions-item>
        <el-descriptions-item label="优惠券金额">{{
          selectedDesk.couponAmount || '0'
        }}</el-descriptions-item>
        <el-descriptions-item label="积分抵扣">{{
          selectedDesk.pointDeduction || '0'
        }}</el-descriptions-item>
        <el-descriptions-item label="实际支付">{{
          selectedDesk.actualPayment || '4.25'
        }}</el-descriptions-item>
        <el-descriptions-item label="赠送积分">{{
          selectedDesk.bonusPoints || '0'
        }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{
          selectedDesk.creationTime || '2024-12-27 14:56:15'
        }}</el-descriptions-item>
        <el-descriptions-item label="支付时间">{{
          selectedDesk.paymentTime || ''
        }}</el-descriptions-item>
        <el-descriptions-item label="支付方式" :span="2">{{
          selectedDesk.paymentMethod || 'cash'
        }}</el-descriptions-item>
      </el-descriptions>

      <div class="mt-50px text-center">
        <el-button type="success">确认收款</el-button>
        <el-button type="danger">出单打印小票</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import { ref } from 'vue'

defineOptions({ name: 'TradeDeskOrderDrawer' })

const props = defineProps({
  drawerVisible: {
    type: Boolean,
    required: true
  },
  selectedDesk: {
    type: Object,
    required: true
  }
})

const drawerVisible = computed(() => props.drawerVisible)
const emit = defineEmits(['update:drawerVisible', 'close'])

const handleClose = () => {
  emit('close')
}
</script>
